<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('popularizeList.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('operatorManage.no2')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- ------------ 内置搜索查询栏开始 -------------- -->
    <search 
			:searchData="searchData" 
			@search="search" 
			:searchRight="true"
			:outputRight="false"
    ></search>
    <!-- ------------ 搜索查询栏结束 -------------- -->

  <!-- ***************  消息发送  *************** -->
    <div class="list_operation" v-if="$store.state.common.permiss.buildinmsg.includes('save')">
      <el-button type="primary" @click="sendNote()">
        +{{$t('operatorManage.no6')}}
      </el-button>
    </div>

  <!-- ***************  优惠券列表  *************** -->
    <div class="table" v-if="true">
      <template>
        <el-table :data="tableData" size="small" stripe>
          <el-table-column align="center" prop="id" :label="$t('operatorManage.no3')">
          </el-table-column>
            <el-table-column align="center" prop="messageType" :label="$t('operatorManage.no4')">
              <template slot-scope="scope">
                <span>{{$t($store.getters.manual_sendStatus(scope.row.messageType))}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="deviceType" :label="$t('yuenan.no37')">
              <template slot-scope="scope">
                <span>{{$t($store.getters.deviceType_status(scope.row.deviceType))}}</span>
              </template>
            </el-table-column>
          <el-table-column align="center" prop="sendObject" :label="$t('operatorManage.no18')">
            <template slot-scope="scope">
              <span>{{$t($store.getters.sendObjStatus(scope.row.sendObject))}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" :label="$t('operatorManage.no19')">
          </el-table-column>
          <el-table-column align="center" prop="description" :label="$t('operatorManage.no11')">
          </el-table-column>
          <el-table-column align="center" prop="message" :label="$t('operatorManage.no12')">
          </el-table-column>
          <el-table-column align="center" prop="appPackage" :label="$t('public.appPackage')">
          </el-table-column>
          <el-table-column align="center" prop="operation" :label="$t('public.operation')" >
            <template slot-scope="scope" >
              <span 
              v-if="$store.state.common.permiss.buildinmsg.includes('edit')"
              class="table_opr"
              @click="onEdit(scope.row)">{{$t('public.no51')}}</span>
              <span 
              v-if="$store.state.common.permiss.buildinmsg.includes('del')"
              class="table_opr" 
              @click="onDel(scope.row.id,scope.row.sendObject)">{{$t('idManage.del')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- ***************  添加活动弹框  *************** -->
    <el-dialog :title="$t('operatorManage.no6')" :visible.sync="dialogFormVisible"  width="750px">
      <h4>{{$t('operatorManage.no16')}}</h4>
      <el-form :model="form" size="small" :rules="rules" ref="ruleForm" label-width="140px">
          <el-form-item :label="$t('operatorManage.no4')" prop="messageType">
            <el-select size="small" v-model="form.messageType">
              <el-option v-for="item in typeOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('yuenan.no37')" prop="deviceType">
            <el-select size="small" v-model="form.deviceType">
              <el-option v-for="item in deviceOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        <el-form-item :label="$t('public.appPackage')" prop="appPackage">
          <el-select size="small" v-model="form.appPackage">
            <el-option v-for="item in apkOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no18')" prop="sendObject">
          <el-select size="small" v-model="form.sendObject">
            <el-option v-for="item in sendObj" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no19')" prop="title">
          <el-input type="text" style="width:215px;" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no11')" prop="description">
          <el-input type="textarea" style="width:400px;" v-model="form.description" maxlength="600"></el-input>
        </el-form-item>
        <el-form-item :label="$t('operatorManage.no12')" prop="message">
          <el-input type="textarea" style="width:400px;" v-model="form.message" maxlength="600"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="save">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>
    <!-- ***************  分页   *************** -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

  </div>
</template>
<script>
import getApp from 'src/mixins/getApp.js';//导出excel
export default {
  name: 'buildInNotePut',
   mixins:[getApp],
  data () {
    const searchData=[
      {
        type: 'select',
        attr: 'messageType',
        label: 'operatorManage.no4',
        option: this.$store.state.options.buildInSendType_options,
        value: '',
        langFlag: true,
      },{
        type: 'select',
        attr: 'deviceType',
        label: 'yuenan.no37',
        option: this.$store.state.options.buildInSendDevice_options,
        value: '',
        langFlag: true,
      },{
        type: 'select',
        attr: 'appPackage',
        label: 'public.appPackage',
        option: [],
        value: '',
        langFlag: false,
      }
    ]
    return {
      dialogFormVisible: false,
      formLabelWidth: '90px',
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      tableData: [],
      searchData:searchData,
      formInline:{
        messageType:'',
        deviceType:'',
        appPackage:''
      },
      form: {
        id:'',
        sendObject: '',
        title: '',
        description: '',
        message: '',
        messageType: '',
        deviceType: '',
        appPackage:''
      },
      sendObj:this.$store.state.options.sendObj_options,
      typeOptions:this.$store.state.options.buildInSendType_options,
      deviceOptions:this.$store.state.options.buildInSendDevice_options,
      apkOptions:[],
      flag: true,// 点击一次开关
      delId:'',
      delObj:'',
      rules:{
        sendObject: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        title: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        appPackage:[
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        description: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        message: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        deviceType: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
        messageType: [
          { required: true, message: this.$t('login.required'), trigger: 'change' }
        ],
      }
    }
  },
  mounted () {
    this.getTableData();
    this.getApp().then(app=>{
      app.appPackage.push({
        label:'ALL',
        value:'ALL'
      })
      this.searchData[2].option=app.appName;
      this.apkOptions=app.appPackage;
    })
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search (search) { // 点击查询按钮
      this.formInline = {
        messageType:search.messageType,
        deviceType:search.deviceType,
        appPackage:search.appPackage
      };
      if(this.flag){
        this.pagination.currentPage = 1;
        this.getTableData();
      } 
    },
    getTableData () {
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          partnerId:sessionStorage.partnerId,
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.operation_automatiList, option).then(res => {
        if (res.code == 200) {
          let date = new Date();
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    sendNote () {
      this.form = {
        id:'',
        sendObject: '',
        title: '',
        appPackage:'', 
        description: '',
        message: '',
        messageType: '',
        deviceType: '',
      }
      this.dialogFormVisible = true;
    },
    onEdit (detailData) {
      this.form = detailData;
      this.dialogFormVisible = true;
    },
    save () {// 消息发送确认操作
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          let option = {
            param: {
              partnerId:sessionStorage.partnerId,
              ...this.form
            }       
          }
          const actionUrl=this.form.id?this.$action.operation_automatiUpdate:this.$action.operation_automatiSave;
          this.$axios.post(actionUrl, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(this.$t('message.success'));
              this.getTableData();
            }else{
              this.$globalMsg.error(res.message);
            }
            this.$refs.ruleForm.resetFields();
          })
        } else {
          return false;
        }
      })
    }, 
    onDel(id,delObj){
      this.$confirm(this.$t('operatorManage.no20')+this.$t(this.$store.getters.sendObjStatus(delObj))+this.$t('operatorManage.no18'), this.$t('public.del'), {
        confirmButtonText: this.$t('public.no49'),
        cancelButtonText: this.$t('public.no50'),
        type:'warning'
      })
      .then(() => {
        let option = {
          param: {
            id:id
          }       
        }
        this.$axios.post(this.$action.operation_automatiDel,option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getTableData();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    },
  }
}
</script>
<style scoped lang="scss">

</style>
